<template>
    <div>
        <pre v-note>
        axios工具模块化
            难点：程序开发时对什么样的功能作模块，如何做模块
                  将模块化项目中被分散大量使用的具有共享特性功能逻辑代码封装成模块
            实现：
                1. 在编译环境下以node的模块构建语法，独立定义模块所属文件或文件夹
                    + 模块组成是多文件方式，多以node文件夹模块为主
                2. 模块对项目公开必要的操作（需要被共享复用的相关操作）
                3. 根据axios的使用规则，完成模块导入，方法定义，异步请求描述等相关代码
                <code>
                import axios from 'axios'
                const URLS = {
                    USER_LIST:"http://127.0.0.1:3000/user/list",
                    CORS_LIST:"http://127.0.0.1:3000/cors/list"
                }
                const loadUserList = function() {
                    // let p = axios.get(URLS.USER_LIST)
                    // return p;
                    return axios.get(URLS.USER_LIST)
                            .then(function(response){
                                    return response.data
                            })
                }
                export default {
                    loadUserList
                }
                </code>
        </pre>
        <pre v-note>
        Vue的全局功能定义
            1. 在模块项目的加载初期就应该完成模块载入（main.js中完成导入）
            2. 如果是需要被没有组件都进行调用的功能模块，可以同JS对象原型规则进行定义
        ==> 官方建议(美化main.js的代码) ==>
            3. Vue提供全局功能方法 Vue.use() , 该方法可以将vue模块化项目中各种全局功能以相同代码方式完成main.js中的定义
               + Vue.use(options) ,  options 取值为固定格式对象 , 其内部必须存在一个 install 函数，该函数会提供Vue构造器作为参数 
                  {
                    install:function(Vue){},
                  }
            <img src="@/assets/Snipaste_2022-08-11_10-31-23.png" alt="" srcset="">
        </pre>
        <p>{{ users }}</p>
        <input type="button" value="userList" @click="findUserList()">
        <p>{{ list }}</p>
        <input type="button" value="corsList" @click="findCorsList()">

    </div>
</template>

<script>
export default {
    data() {
        return {
            users:[],
            list:[]
        }
    },
    methods:{
        async findUserList(){
            try {
                let data = await this.$api.loadUserList()
                this.users = data;
            } catch (error) {
                console.log(error)
            }
        },
        async findCorsList(){
            try {
                // var a = null;
                // a.a()
                let data = await this.$api.loadCorsList()
                this.list = data;
            } catch (error) {
                console.log(error)
                console.log(this);
                this.$tip("请求失败")
            }
        }
    }
}
</script>